<!doctype html>
<html>

	<head>
		<meta charset="UTF-8">
		<title></title>
		<meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
		<link href="../css/mui.min.css" rel="stylesheet" />
		<link rel="stylesheet" href="../css/style.css" />

		<style type="text/css">
			[v-cloak] {
				display: none;
			}
			
			.mui-btn {
				width: 120px;
				border: 1px solid #25CDDA;
				background-color: #25CDDA;
			}
			
			.mui-btn:active {
				border: 1px solid #58dde8!important;
				background-color: #58dde8!important;
			}
			
			.row {
				background-color: #FFFFFF;
				margin: 10px 0px;
			}
			
			.row div {
				margin: 5px 0px;
				height: 20px;
				padding: 0px 15px;
			}
			
			.row div.bb {
				border-bottom: solid 1px gainsboro;
			}
			
			.row div span.title {
				font-size: 14px;
				color: gray;
			}
			
			.row div span.head {
				font-size: 14px;
				width: 25px;
				color: white;
				background-color: #27CDDB;
			}
			
			.row div span.val {
				float: right;
				color: gray;
				font-size: 14px;
			}
			
			.mui-bar-nav {
				background: #27CDDB;
			}
			
			.mui-action-back,
			.mui-title,
			.mui-action-back:active {
				color: #FFFFFF;
			}
			
			.mui-popup-button {
				color: #27CDDB;
			}
		</style>
	</head>

	<body>
		<header class="mui-bar mui-bar-nav">
			<a class="mui-action-back mui-icon mui-icon-left-nav mui-pull-left"></a>
			<h1 class="mui-title" id="title">交易详情</h1>
		</header>
		<div class="mui-content" id="aicVue" v-cloak>
			<div class="mui-row row">
				<div class="mui-col-xs-12 bb">
					<span class="head">&nbsp;卖单&nbsp;</span>
					<span class="val"><b style="color: #27CDDB;">待成交</b></span>
				</div>
				<div class="mui-col-xs-12">
					<span class="title">总金额</span>
					<span class="val"><b style="font-size: 18px;color: #000000;">{{order.coinTotalPrice}}</b> CNY</span>
				</div>
				<div class="mui-col-xs-12">
					<span class="title">订单号</span>
					<span class="val">{{order.orderNo}}</span>
				</div>
				<div class="mui-col-xs-12">
					<span class="title">单价</span>
					<span class="val">{{order.coinPrice}} CNY</span>
				</div>
				<div class="mui-col-xs-12">
					<span class="title">币数量</span>
					<span class="val">{{order.coinQuantity}} AIC</span>
				</div>
				<div class="mui-col-xs-12">
					<span class="title">手续费</span>
					<span class="val">{{order.coinQuantity * order.costScale}} AIC</span>
				</div>
			</div>

			<div class="mui-row row">
				<div class="mui-col-xs-12">
					<span class="title">买家姓名</span>
					<span class="val">{{member.realname}}</span>
				</div>
				<div class="mui-col-xs-12">
					<span class="title">买家手机</span>
					<span class="val">{{member.mobile}}</span>
				</div>
			</div>
			<div class="mui-button-row" style="margin-bottom: 20px;margin-top: 10px;">
				<button id="confirm" type="button" class="mui-btn mui-btn-primary" onclick="return false;" @click="validateForm">确认下单</button>&nbsp;&nbsp;
			</div>
		</div>

		<script type="text/javascript" src="../js/mui.min.js"></script>
		<script type="text/javascript" src="../js/vue.min.js"></script>
		<script type="text/javascript" src="../js/validator.min.js"></script>
		<script type="text/javascript" src="../js/public.js"></script>
		<script type="text/javascript ">
			mui.init()
			var id = "";
			var config = "";
			var vm = new Vue({
				el: '#aicVue',
				data: {
					order: {
						orderNo: "",
						coinPrice: "",
						coinQuantity: "",
						coinTotalPrice: "",
						costScale: ""
					},
					member: {
						nickname: "",
						mobile: "",
						alipay: "",
						wechat: "",
						bankName: "",
						bankNameBranch: "",
						bankCardNumber: "",
					},
					password: ""

				},
				mounted: function() {
					mui.plusReady(function() {
						swipeBack();
						//给detailPage赋值,根据ID获取详情页面
						id = plus.webview.currentWebview().mid;
						config = plus.storage.getItem("config");
						vm.getGuaDanDetail();
					});
				},
				methods: {
					getGuaDanDetail: function() {
						var mdata = {
							"id": id
						};
						mui.postParam(GetGuaDanDetail, mdata, function(result) {
							mConsole.log("挂单详情：" + JSON.stringify(result));
							if(result.code == 0) {
								vm.order = result.ctocOrder;
								vm.order.costScale = JSON.parse(config).transFee;
								vm.member = result.member;
								return;
							}
							mymui(result.msg);
						});
					},
					selloutGuadan: function() {
						var mdata = {
							"id": id,
							"payword": vm.password
						};
						mui.postJSON(SellOut, mdata, function(result) {
							mConsole.log("挂单卖出：" + JSON.stringify(result));
							if(result.code == 0) {
								mymui("下单成功，请在我的交易中查看订单");
								mui.fire(plus.webview.getWebviewById('tabjiaoyi.html'), 'removeItem', {
									id: id
								});
								mui.fire(plus.webview.getWebviewById('tabmy.html'), 'reLoadData');
								mui.back();
								return;
							}
							mymui(result.msg);
						});
					},
					validateForm: function() {
						var payword = JSON.parse(plus.storage.getItem("member")).payword;
						if(!payword) {
							mymui("请先设置支付密码");
							return;
						}

						mui.prompt('', '请输入支付密码', '下单确认', '', function(e) {
							if(e.index == 1) {
								if(validator.isEmpty(e.value)) {
									mymui("请输入支付密码");
									return;
								}
								vm.password = e.value;
								vm.selloutGuadan();
							}
						}, 'div');
						document.querySelector('.mui-popup-input input').type = 'password';
					}
				}
			});
		</script>
	</body>

</html>